import React, { useContext,useState } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "../context/authContext";
import { useNavigate } from "react-router-dom";
import Logo from "../img/logo.png";
import { AppstoreOutlined, HomeOutlined,BookOutlined,EditOutlined } from '@ant-design/icons';
import { Menu,Modal } from 'antd';

const items = [
  {
    label: (
    <Link to="/"> &nbsp;首 页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </Link>
    ),
    key: 'home',
    icon: <HomeOutlined />,
  },
  {
    label: (
      <Link to="/?cat=study"> &nbsp;学 习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </Link>
    ),
    key: 'study',
    icon: <BookOutlined />,
  },
  {
    label: (
      <Link to="/?cat=mood"> &nbsp;随 笔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </Link>
    ),
    key: 'mood',
    icon: <EditOutlined />,
  },
  {
    label: (
      <Link to="/?cat=share"> &nbsp;分 享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </Link>
    ),
    key: 'share',
    icon: <AppstoreOutlined />,
  }
];

const Navbar = () => {
  const navigate = useNavigate();
  const { currentUser, logout } = useContext(AuthContext);
  const [current, setCurrent] = useState('home');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    logOut()
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const changeCur = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };
  const logOut = ()=>{
    logout()
    navigate('/')
  }
  return (
    <div className="navbar">
    <Modal title="提示" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <p>是否确认退出登录！</p>
    </Modal>
      <div className="container">
        <div className="logo">
          <Link to="/">
          <img src={Logo} alt="" />
          </Link>
        </div>
        <div className="links">
        <Menu className="ant-menu" onClick={changeCur} selectedKeys={[current]} mode="horizontal" items={items} />
          < h6>{currentUser?.username||'用户尚未登录'}</ h6>
          {currentUser ? (
            <h6 type="primary" onClick={showModal} style={{color:'black',fontWeight:'300'}}>退出登录</h6>
          ) : (
            <Link className="link" to="/login"> 
              <h6>登录</h6>
            </Link>
          )}
          < h6 className="write">
            <Link className="link" to="/write">
              写作
            </Link>
          </ h6>
        </div>
      </div>
    </div>
  );
};

export default Navbar;
